<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Redux</title>
</head>
<body>

<button id="increment">+</button>
<span id="count">0</span>
<button id="decrement">-</button>

<!--<script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>-->
<script src="https://cdn.bootcdn.net/ajax/libs/redux/5.0.1/redux.legacy-esm.min.js"></script>

<!--

触发
判断
更新
采用事件监听模式



-->

<script>

    // 判断
    function counterRedux(state = {count: 0}, action){
        switch (action.type){
            case "INCREMENT":
                return {count: state.count + 1}
            case "DECREMENT":
                return {count: state.count - 1}
            default:
                return state
        }
    }

    let store = Redux.createStore(counterRedux);

    // 修改
    store.subcribe(() => {
        let state = store.getState()
        let count = document.getElementById('count');
        count.innerText = state.count
    })
    // 触发
    let increment = document.getElementById('increment');
    increment.addEventListener('click', () => store.dispatch({type: 'INCREMENT'}))

    let decrement = document.getElementById('decrement');
    decrement.addEventListener('click', () => store.dispatch({type: 'DECREMENT'}))

</script>
</body>
</html>